<html>

	<head>
		<title></title>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			ul {
				width: 100px;
				height: 200px;
				border: 1px solid red;
				overflow: auto;
				-webkit-overflow-scrolling: touch;
			}
			
			ul li {
				width: 100%;
				height: 20px;
				background: grey;
				border-radius: 6px;
			}
		</style>
	</head>

	<body>
		<p>测试ios的滚动测试用例</p>
		<button>添加</button>
		<div>
			<ul>
				<li id="">原来的</li>
			</ul>
		</div>

		<div id="box">

		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		var num = 0;
		$("button").click(function() {
			//var scroll_top = $("ul").scrollTop()
			num++;
			for(var i = 0; i < 10; i++) {
				var str = "";
				str = "<li>" + num + "-" + i + "</li>";
				if(i==9){
					$("li").eq(0).before(str).addClass("z"+num);
				}else{
					$("li").eq(0).before(str);
				}
				
				
			}
			if($(".z"+(num-1))[0]){
				$(".z"+(num-1)).css("color","red");
				$(".z"+(num-1))[0].scrollIntoView();
			}
			
			//$("ul").scrollTop(scroll_top + 200)
			$("<p></p>").text($("ul").scrollTop()).appendTo($("#box"));
		})
	</script>
	
</html>